<template>
  <!-- 这个主要是做模拟keepalive缓存数据 -->
  <div id="JxzDetails">
    <StepBar lineDirection="shuxian" layoutDirection="verticalDirection"></StepBar>

    <!-- 下单表格 -->
    <div class="ceshi">
      <Xiadan v-show="componentName === 'yixiadan'" @sendSave="sendSave"></Xiadan>
      <Peicang v-show="componentName === 'yipeicang'" @saveSendPeicang="saveSendPeicang"></Peicang>
      <Zhuangxiang v-show="componentName === 'yizhuangxiang'" @saveSendZhuangxiang="saveSendZhuangxiang"></Zhuangxiang>
      <Baoguan v-show="componentName === 'yibaoguan'" @saveSendBaoguan="saveSendBaoguan"></Baoguan>
      <Qingguan v-show="componentName === 'yiqingguan'" @saveSendBaoguan="saveSendQingguan"></Qingguan>
    </div>
  </div>
</template>

<script lang="ts" setup name="JxzDetails">
import { provide, ref } from 'vue'
// JxzDetails
import Xiadan from './components/Xiadan.vue'
import Peicang from './components/peicang.vue'
import Zhuangxiang from './components/zhuangxiang.vue'
import Baoguan from './components/baoguan.vue'
import Qingguan from './components/Qingguan.vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

// 子传父下单数据
const empty = ref()
// 子传父配仓数据
const peicang = ref()
// 子传父装箱数据
const zhuangxiang = ref()
// 子传父报关数据
const baoguan = ref()
// 路由传参数
const luyou = () => {
  if (route.query.name) {
    const a: any = {
      已配舱: 'yipeicang',
      已下单: 'yixiadan',
      已装箱: 'yizhuangxiang',
      已报关: 'yibaoguan',
      已清关: 'yiqingguan'
    }
    const key: any = route.query.name
    componentName.value = a[key]
  }
}

// 下单保存按钮的逻辑
const sendSave = (createOrderForm: any) => {
  empty.value = createOrderForm
  console.log(`父组件接收到`, createOrderForm, empty.value)
}
// 配仓数据
const saveSendPeicang = (peicangFrom: any) => {
  peicang.value = peicangFrom
  console.log(`父组件接收到`, peicangFrom)
}
// 装箱数据
const saveSendZhuangxiang = (zhuangxiangFrom: any) => {
  zhuangxiang.value = zhuangxiangFrom
  console.log(`父组件接收到`, zhuangxiangFrom)
}
// 报关数据
const saveSendBaoguan = (baoguanFrom: any) => {
  baoguan.value = baoguanFrom
  console.log(`父组件接收到`, baoguanFrom)
}
// 清关数据
const saveSendQingguan = (baoguanFrom: any) => {
  baoguan.value = baoguanFrom
  console.log(`父组件接收到`, baoguanFrom)
}

// 依赖注入
const componentName = ref('已下单')
//接受名称控制显示
const HandleClick = (val: string) => {
  componentName.value = val
}
// 发送控制显示的函数给StepBar接收
provide('HandleClick', HandleClick)
onMounted(() => {
  luyou()
})
</script>

<style lang="scss" scoped>
#JxzDetails {
  .ceshi {
    margin-top: 50px;
    margin-left: 100px;
    padding: 10px;
  }
}
</style>
